<template>
	<view style="margin-top: 10rpx; width: 100vw;height: 100vh;">
		<uni-forms label-position="top" ref="form" label-width="auto">
			<!-- 上级工会审批建会通过材料 -->
			<view style="height: 20rpx;">

			</view>
			<uni-forms-item label="上级一级工会审批建会通过材料：" name="img1" required>
				<view class="text-img" style="margin-top: -10rpx;margin-bottom: 30rpx;">仅支持jpeg、png、jpg格式，可上传多张</view>
				<uni-file-picker style="margin: 0 25rpx;" v-model="imageValue1" file-mediatype="image" mode="grid"
					file-extname="png,jpg,jpeg" iconColor="#f5f5f5" @select="handleFileSelect1" />
			</uni-forms-item>

			<!-- 工会主席身份证 -->
			<uni-forms-item label="工会主席身份证：" name="img2" required style="margin: 0;">
				<view class="text-img" style="margin-top: -10rpx;margin-bottom: 30rpx;">仅支持jpeg、png、jpg格式</view>
				<view class="img margin-b ">
					<image class="idimg" :src="idcardUrl_copy || defaultIdcardUrl" @click="handleIdCardClick" />
					<image class="del_btn" :src="idcard" v-if="idcardUrl_copy" @click="clearIdCardUrl" />
				</view>
				<view class="text-img">上传您的身份证头像面</view>
			</uni-forms-item>

			<!-- 附加材料 -->

			<uni-forms-item label="附加材料：" name="img3" required v-show="view">
				<view class="text-img">可选文件，支持jpeg、png、jpg格式</view>
				<uni-file-picker v-model="imageValue3" file-mediatype="image" mode="grid" file-extname="png,jpg,jpeg"
					@select="handleFileSelect2" />
			</uni-forms-item>




		</uni-forms>
		<view class="btn1 flex buttonPoast">
			<button class="button flex1 margin20" @click="navigateToPreviousPage">上一步</button>
			<button class="button flex1" @click="openPopup">提交</button>
		</view>
		<uni-popup ref="inputPopup" type="dialog">
			<uni-popup-dialog ref="inputDialog" mode="input" title="是否确认上传工会主席身份证？" @confirm="handleDialogConfirm">
				<image class="idimg" style="height: 300rpx;" :src="idcardUrl_copy || defaultIdcardUrl" />
			</uni-popup-dialog>
		</uni-popup>


	</view>
</template>

<script>
	import {
		getPagesToken,
		removePagesToken,
		setPagesToken
	} from '@/utils/auth';
	import {
		uploadfileFn
	} from "@/api/upload/index.js";
	import idcard from "@/static/images/shenfenzheng.png";
	import {
		setInitiateMembershipApproval
	} from '@/api/work/unionsettlementFormNext';
	import {
		FileUrl
	} from '@/config';
	import {
		toast
	} from '../../utils/common';

	export default {
		data() {
			return {
				view: false,
				imageList1: [],
				imageList3: [],
				idcardUrl: "", // 工会主席身份证
				idcardUrl_copy: "", // 工会主席身份证
				defaultIdcardUrl: idcard, // 默认身份证图片
				unionChairmanIdCardFront: '',
				unionChairmanIdCard: "",
				unionChairmanName: "",
			};
		},

		methods: {
			// 处理文件选择1：上传上级工会审批材料
			handleFileSelect1(event) {
				event.tempFilePaths.forEach(file => {
					this.uploadFile(file, 'imageList1');
				});
			},

			// 处理文件选择2：上传附加材料
			handleFileSelect2(event) {
				event.tempFilePaths.forEach(file => {
					this.uploadFile(file, 'imageList3');
				});
			},

			// 通用的文件上传处理函数
			uploadFile(file, listKey) {


				if (listKey === 'idcardUrl') {
					uploadfileFn(file, true).then(res => {


						this.unionChairmanIdCard = res.data.idCardInfo.idNumber
						this.unionChairmanName = res.data.idCardInfo.name

						const fileUrl = `${FileUrl}${res.data.sysFile.url}`;
						if (listKey == 'idcardUrl') {
							this.idcardUrl = res.data.sysFile.url;
							this.idcardUrl_copy = fileUrl;
						}
					}).catch(err => {
						toast("身份信息识别别失败")
						console.error("文件上传失败：", err);
					});
				} else {
					uploadfileFn(file).then(res => {
						const fileUrl = `${FileUrl}${res.data.url}`;
						if (listKey == 'imageList1') {
							this.imageList1.push(res.data.url);
						} else if (listKey == 'imageList3') {
							this.imageList3.push(res.data.url);
						}
					}).catch(err => {
						console.error("文件上传失败：", err);
					});
				}



			},

			// 格式化日期时间字符串
			formatDateTime(dateStr, timeStr = '12:00:00') {
				const datePattern = /^\d{4}-\d{2}-\d{2}$/;
				if (!datePattern.test(dateStr)) {
					throw new Error('日期字符串格式不正确，应为 YYYY-MM-DD');
				}
				return `${dateStr} ${timeStr}`;
			},

			// 处理对话框确认操作
			handleDialogConfirm() {


				const existingData = getPagesToken('OrganizationalForm');
				const updatedData = {
					...existingData,


					approvalFile: JSON.stringify(this.imageList1),
					unionChairmanName: this.unionChairmanName,
					unionChairmanIdCard: this.unionChairmanIdCard,
					unionChairmanIdCardFront: this.idcardUrl,
					attachFile: JSON.stringify(this.imageList3),
					foundDate: this.formatDateTime(existingData.foundDate)
				};
				setInitiateMembershipApproval(updatedData).then(res => {

					removePagesToken('OrganizationalForm')
					
					uni.redirectTo({
						url: `/pages/work/unionsettlement-form-title?showtitle=true`
					});



					// this.$tab.red(`/pages/work/unionsettlement-form-title?showtitle=true`);




				}).catch(err => {

					toast(err)
				});
			},

			// 跳转到上一步页面
			navigateToPreviousPage() {
				// this.$tab.navigateTo(`/pages/work/unionsettlement-form`);
				this.$router.back();
			},

			// 打开提交对话框
			openPopup() {
				if (!this.idcardUrl) {
					toast('请上传工会主席身份证')
					return
				}

				if (this.imageList1.length == 0) {
					toast('请上传认证材料')
					return
				}
				this.$refs.inputPopup.open();
			},

			// 处理身份证点击事件
			handleIdCardClick() {
				if (this.idcardUrl_copy) {
					this.previewImage(this.idcardUrl_copy);
				} else {
					this.selectImage("idcardUrl");
				}
			},

			// 选择图片
			selectImage(name) {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const selectedFile = res.tempFilePaths[0];
						this.uploadFile(selectedFile, name);
					}
				});
			},

			// 预览图片
			previewImage(current) {
				uni.previewImage({
					current,
					urls: [current],
				});
			},
			// 清除身份证图片
			clearIdCardUrl() {
				this.idcardUrl = "";
				this.idcardUrl_copy = "";
			},

		}
	};
</script>



<style lang="scss" scoped>
	.buttonPoast {
		position: relative;
		bottom: -120rpx;
	}

	.img {
		width: 640rpx;
		height: 410rpx;
		text-align: center;
		margin: 0 auto;

		.idimg {
			width: 100%;
			height: 100%;
		}
	}

	.text-img {
		font-size: 22rpx;
		margin-left: 25rpx;
		color: rgba(153, 153, 153, 1);
		margin-bottom: 8px;
	}

	::v-deep .uni-forms {
		padding: 0 32rpx 16rpx;
		background-color: #fff;
	}
</style>